<template>
  <div class="new-page em-monitoring padding-0 table-h-48">
    <!-- search -->
    <a-form-model ref="task-research-box" layout="inline" :model="search" class="comm-search" :style="`width: calc(100% - ${sideMenuWidth} - 33px)`">
      <!-- 筛选条件与查询 -->
      <a-form-model-item v-show="checkedFilter.includes(0)" label="">
        <a-select
          v-model="search.airline"
          show-arrow
          mode="multiple"
          :max-tag-count="1"
          style="minWidth: 100%"
          placeholder="航空公司"
          allow-clear
          @change="changeAirline"
        >
          <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
          <a-select-option v-for="selectItem in ftmAirlineList" :key="selectItem.id" :value="selectItem.name">
            {{ selectItem.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <!-- 事件类型 -->
      <a-form-model-item v-show="checkedFilter.includes(1)" label="">
        <eventList
          v-model="search.eventType"
          :mmsg-type.sync="search.mmsgType"
          :is-etops.sync="search.isEtops"
          :is-ground.sync="search.isGround"
          :show-cmm="true"
          :mul="true"
          width="100%"
          placeholder="事件类型"
        />
      </a-form-model-item>

      <!-- 机队 -->
      <a-form-model-item v-show="checkedFilter.includes(2)" label="">
        <a-select
          v-model="search.fleet"
          show-arrow
          :data-source="ftmFleetListFilter"
          style="minWidth: 100%"
          placeholder="机队"
          mode="multiple"
          :max-tag-count="1"
          allow-clear
          @change="changeFleet"
        >

          <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
          <a-select-option v-for="selectItem in ftmFleetList" :key="selectItem.id" :value="selectItem.name">
            <a-tooltip placement="left" :destroy-tooltip-on-hide="true" :mouse-enter-delay="0.2">
              <template slot="title">
                {{ selectItem.name }} ({{ selectItem.num }})
              </template>
              {{ selectItem.name }} ({{ selectItem.num }})
            </a-tooltip>

          </a-select-option>
        </a-select>
      </a-form-model-item>

      <!-- 机号 -->
      <a-form-model-item v-show="checkedFilter.includes(3)" label="">
        <tailNumber
          v-model="search.tailnumber"
          :data-source="ftmAirplaneListFilter"
          value-key="tailnumber"
          name-key="tailnumber"
          width="100%"
        />
      </a-form-model-item>

      <!-- ATA -->
      <a-form-model-item v-show="checkedFilter.includes(4)" label="">
        <ataList v-model="search.ata" width="100%" />
      </a-form-model-item>

      <!-- priority -->
      <a-form-model-item v-show="checkedFilter.includes(5)" label="">
        <a-select
          v-model="search.priority"
          show-arrow
          style="minWidth: 100%"
          placeholder="优先级"
          mode="multiple"
          :max-tag-count="1"
          allow-clear
        >
          <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
          <a-select-option
            v-for="selectItem in [...[...priorityList].reverse(), {
              value: 0,
              name: '无',
            }]"
            :key="selectItem.id"
            :value="selectItem.value"
          >
            {{ selectItem.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item v-show="checkedFilter.includes(6)" label="">
        <a-input
          v-model="msgCode"
          style="minWidth: 100%"
          placeholder="事件代码"
        />
      </a-form-model-item>
      <a-form-model-item v-show="checkedFilter.includes(7)" label="">
        <a-input
          v-model="msgName"
          style="minWidth: 100%"
          placeholder="事件名称"
        />
      </a-form-model-item>
      <!-- 起飞机场 -->
      <!-- <a-form-model-item label="">
        <airportList
          v-model="search.dep"
          :data-source="depListFilter"
          type="dep"
          width="100%"
          :show-num="true"
        />
      </a-form-model-item> -->

      <!-- 到达机场 -->
      <!-- <a-form-model-item label="">
        <airportList
          v-model="search.arr"
          :data-source="arrListFilter"
          type="arr"
          width="100%"
          :show-num="true"
        />
      </a-form-model-item> -->
      <!-- <a-form-model-item label="" style="display:inline-block;width:auto;margin-bottom:0">
        <a-radio-group v-model="codeType">
          <a-radio v-for="item in typeList" :key="item.value" :value="item.value" @click="cancelRadioHandler(item.value)">
            {{ item.name }}
          </a-radio>

        </a-radio-group>
      </a-form-model-item> -->

      <a-form-model-item v-show="checkedFilter.includes(8)" label="">
        <a-select
          v-model="search.leg"
          show-arrow
          style="minWidth: 100%"
          placeholder="航段"
          allow-clear
        >
          <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
          <a-select-option v-for="selectItem in [0,-1,-2,-3,-4,-5,-6,-7,-8,-9,-10]" :key="selectItem" :value="selectItem">
            {{ selectItem }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item v-show="checkedFilter.includes(9)" label="">
        <a-select
          v-model="search.controlStateCode"
          show-arrow
          style="minWidth: 100%"
          placeholder="管控状态"
          allow-clear
        >
          <a-select-option
            v-for="(item, index) of selectOptionS"
            :key="index"
            :value="item.value"
          >
            {{ item.key }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item v-show="checkedFilter.includes(10)" label="">
        <a-checkbox v-model="otherItemF">
          other item
        </a-checkbox>

      </a-form-model-item>

      <!-- <a-form-model-item label="FDE Code" class="ant-row-2 ">

        <eventCodeList v-model="search.fdeCode" value-key="value" name-key="value" />
      </a-form-model-item>
      <a-form-model-item label="MMSG Code" class="ant-row-2">

        <mmsgCodeList v-model="search.mmsgCode" value-key="value" name-key="value" />
      </a-form-model-item>
      <a-form-model-item label="ALERT Code" class="ant-row-2">

        <alertCodeList v-model="search.alertCode" value-key="value" name-key="value" />
      </a-form-model-item> -->

      <a-form-model-item class="of-fb-11">
        <a-button type="primary" ghost @click="resetSearchHandler">
          重置
        </a-button>
        <a-button type="primary" class="ml-16" :loading="eventListLoading" @click="changeTable({ current: 1 })">
          查询
        </a-button>

        <a-button class="ml-16 fs-export-btn" type="primary" :loading="processingExportExcelLoading" :disabled="selectedRowKeys.length===0 || eventList.length==0" ghost @click="exportHandler">导出</a-button>
        <a-dropdown
          :visible="checkedFilterShow"
          :trigger="['click']"
          placement="bottomRight"
          @visibleChange="handleClickChange"
        >
          <a-icon :component="require('@/assets/icon/Fleet_Status_Filter_Setting.svg')" class="cu-poin ml-16" />
          <div slot="overlay" class="c-dropdown-box">
            <div class="c-dropdown-box-title">选择显示的筛选条件</div>
            <a-checkbox-group v-model="checkedFilterTmp">
              <a-row class="checked-filter-box">
                <a-col v-for="item in filterList" :key="item.label" class="notice-item-e" :span="24">
                  <a-checkbox :value="item.value">
                    {{ item.label }}
                  </a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>

            <div class="d-flex jc-center">
              <a-button class="mr-4" size="small" @click="handleClickChange(false)">取消</a-button>
              <a-button class="ml-4" size="small" type="primary" @click="filterChangeSave">保存</a-button>
            </div>
          </div>
        </a-dropdown>
      </a-form-model-item>

    </a-form-model>

    <!-- <filterSearch
      ref="fs-search"
      :loading="eventListLoading"
      :selected-row-keys="selectedRowKeys"
      :export-handler="exportHandler"
      @searchHandler="changeTable"
    /> -->

    <!-- table -->
    <a-table
      class="table-box"
      size="small"
      :columns="columns"
      :data-source="eventList"
      :row-selection="{
        selectedRowKeys:selectedRowKeys,
        onChange:onChangeRow
      }"
      :pagination="{
        showTotal:(total)=> `共 ${total} 条数据`,
        pageSizeOptions:['10','20','30','40','50'],
        showSizeChanger: true,//设置每页显示数据条数
        showQuickJumper: true,
        size:'big',
        current:paginationOptions.pageNum,
        pageSize:paginationOptions.pageSize,
        total:paginationOptions.total
      }"
      :scroll="{y:sliderHeight}"
      :loading="eventListLoading"
      :custom-row="customRow"
      :row-key="(row,index) =>index"
      :row-class-name="rowClassHandler"
      table-layout="fixed"
      @change="changeTable"
    />

  </div>

</template>

<script>
import { getControlState } from '@/services/eventMonitoring.js';
import rowClass from '@/pages/common/rowClass';
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
// import filterSearch from '@/pages/components/filterSearch';
import dotHistory from '@/pages/components/dotHistory';

import { activeList, priorityList } from '@/pages/common/constant.js';
import { downloadUrl } from '@/utils/util';
import eventList from '@/pages/components/eventList';
// import airportList from '@/pages/components/airportList';
import ataList from '@/pages/components/ataList';
import tailNumber from '@/pages/components/tailNumber';

// import eventCodeList from '@/pages/components/eventCodeList';
// import mmsgCodeList from '@/pages/components/mmsgCodeList';
// import alertCodeList from '@/pages/components/alertCodeList';
export default {
  name: 'EventMonitoring',
  components: {
    // eventCodeList,
    // mmsgCodeList,
    // alertCodeList,
    eventList,
    // airportList,
    ataList,
    tailNumber
  },
  mixins: [rowClass],

  // i18n: require('./i18n'),
  data() {
    return {
      selectOptionS: [],
      checkedFilterShow: false,
      checkedFilterTmp: [],
      checkedFilter: [1, 2, 3, 4, 8, 9, 10],
      filterList: Object.freeze([
        {
          value: 0,
          label: '航空公司'
        },
        {
          value: 1,
          label: '事件类型'
        },
        {
          value: 2,
          label: '机队'
        },
        {
          value: 3,
          label: '机号'
        },
        {
          value: 4,
          label: 'ATA'
        },
        {
          value: 5,
          label: '优先级'
        },
        {
          value: 6,
          label: '事件代码'
        },
        {
          value: 7,
          label: '事件名称'
        },
        {
          value: 8,
          label: '航段'
        },
        {
          value: 9,
          label: '管控状态'
        },
        {
          value: 10,
          label: 'other item'
        }
      ]),
      typeList: [
        {
          value: 1,
          name: 'FDE'
        },
        {
          value: 2,
          name: 'MMSG'
        },
        {
          value: 3,
          name: 'Alert'
        },
        {
          value: 4,
          name: 'ALL'
        }
      ],
      sliderHeight: 600,
      msgName: '',
      msgCode: '',
      priorityList,
      selectedRowKeys: [],
      selectedRowIds: [],
      allCheck: false,
      otherItem: false,
      search: {
        otherItem: 0
      },
      eventDetailsVisible: false,
      currentRow: {},
      refresh: -1,
      columns: [
        {
          title: '机号',
          dataIndex: 't2',
          width: 80,
          customRender: (value, record) => {
            return <a class='h-48' onClick={(e) => this.repHandler(e, record, 'flightLegHistoryVisible')}>{record.event?.tailnumber || '--'}</a>;
          }
        },
        {
          title: '机队',
          dataIndex: 'fleet',
          width: 80,
          customRender: (value, record) => {
            return <span class='h-48'>{record.event?.fleet || '--'}</span>;
          }
        },
        {
          title: '航班',
          dataIndex: 't2ss4',
          width: 80,
          customRender: (value, record) => {
            return <a class='h-48' onClick={(e) => this.repHandler(e, record, 'flightLegDetailsVisible')}>{record.event?.flightNo ?? '--'}</a>;
          }
        },
        {
          title: '故障级别',
          dataIndex: 't1',
          width: 80,
          customCell: () => {
            return {
              style: {
                'position': 'relative'
              }
            };
          },
          customRender: (value, record) => {
            const msgType = record.event?.name;
            return (
              <div class='h-48'>
                <noticePriorityIcon is-etops={record.event?.isEtops} priority={record.event?.priority} msgType={msgType} />
              </div>
            );
          }
        },
        {
          title: '事件类型',
          dataIndex: 'eventType',
          width: 95,
          customRender: (value, record) => {
            return [
              record.eventType === 'Alert' ? <div class='fw-b lh-1 h-48'>{record.eventType}</div> : '',
              record.eventType !== 'Alert' ? <span class={[record.eventType === 'Alert' ? '' : 'fw-b h-48']}>{record.event?.name || '--'}</span> : ''
            ];
          }
        },
        {
          title: '编码',
          dataIndex: 'code',
          width: 120,
          customRender: (value, record) => {
            const pa = [
              <div class='em-table-p  fs-14 h-48' style='line-height:1!important'>
                {record.event?.code}
              </div>
            ];
            record.childrenEvents?.forEach(item => {
              pa.push(
                <div class='em-table-p fs-14  h-48' style='line-height:1!important'>{item.code}</div>
              );
            });
            return pa;
          }
        },
        {
          title: '名称',
          dataIndex: 'description',
           width: 120,
          customRender: (value, record) => {
            const pa = [
              <div class='em-table-p fs-14 text-over h-48'>
                {record.event?.description}
              </div>
            ];
             record.childrenEvents?.forEach(item => {
               pa.push(
                 <div class='em-table-p fs-14 text-over h-48'>{item.description}</div>
               );
             });
             return pa;
          }
        },
        {
          title: '历史',
          dataIndex: 'occurLegList',
          width: 240,
          customRender: (value, record) => {
            const { code, tailnumber } = record?.event ?? {};
            const eventType = record.eventType === 'Alert' ? record.eventType : record.event?.name;
            const pa = [
              <div class='h-48-2 ml-m12'>
                <dotHistory
                  eventType={eventType}
                  code={code}
                  tailnumber={tailnumber}
                  data={value}
                  dotType={record.occurLegStatusList}
                  cLeg={record.event?.leg}
                  iWidth={24}
                  leg={0} />
              </div>
            ];
              record.childrenEvents?.forEach(cItem => {
                pa.push(
                  <div class='h-48-2 ml-m12'>
                    <dotHistory
                      eventType={eventType}
                      code={code}
                      tailnumber={tailnumber}
                      data={cItem.mmsgLegs}
                      dotType={cItem.mmsgLegStatus}
                      cLeg={record.event?.leg}
                      iWidth={24}
                      leg={0} />
                  </div>
                );
              });
              return pa;
          }
        },
        {
          title: '状态',
          dataIndex: 'activeState',
          width: 140,
          customRender: (value, record) => {
            return <div class='h-48'>
              {record.event?.activeState || '--'}
            </div>;
          }
        },
        {
          title: '活动状态',
          dataIndex: 'activity',
          width: 92,
          customRender: (value, record) => {
            const pa = [
              <div class='em-table-p h-48'>
                <a class='fs-14 fw-b'>
                  {record.event?.activity ? activeList.find(item => item.value === record.event?.activity)?.name ?? '--' : '--'}
                </a>
              </div>
            ];
            record.childrenEvents?.forEach(item => {
              pa.push(
                <div class='em-table-p fs-13 h-48'>
                  {item.activity ? activeList.find(acItem => acItem.value === item.activity)?.name ?? '--' : '--'}
                </div>
              );
            });
            return pa;
          }
        },
        // {
        //   title: '管控状态',
        //   dataIndex: 'controlState',
        //   width: 140,
        //   customRender: function(text, row, index) {
        //     const controlState = row.event.controlState;
        //     let v = controlState;
        //     if (!v) {
        //       v = '待处理';
        //     }
        //     return <div class='h-48'>{v}</div>;
        //   }
        // },
        {
          title: '时间',
          dataIndex: 'time',
          width: 80,
          customRender: (value, record) => {
            const pa = [
              <div class='h-48'>
                <div class='em-table-p em-time-box'>
                  <div class='fw-b fs-16 numbers text-color-505363'>{this.$moment.utc(record.event?.msgTime).format('MM-DD')}</div>
                  <div class='fs-12 text-color-9ea5b2'>{this.$moment.utc(record.event?.msgTime).format('HH:mm')}</div>
                </div>
              </div>
            ];
            record.childrenEvents?.forEach(item => {
              pa.push(
                <div class='h-48'>
                  <div class='em-table-p em-time-box'>
                    <div class='fw-b fs-16 numbers text-color-505363'>{this.$moment.utc(item.msgTime).format('MM-DD')}</div>
                    <div class='fs-12  text-color-9ea5b2'>{this.$moment.utc(item.msgTime).format('HH:mm')}</div>
                  </div>
                </div>
              );
            });
            return pa;
          }
        },
        {
          title: '航段',
          dataIndex: 'Leg',
          width: 80,
          customRender: (value, record) => {
            return (
              <div class='h-48'>
                {this.$legHandler(record.event?.leg, record.event?.totalLeg)}
              </div>
            );
          }
        },
          {
          title: '管控状态',
          dataIndex: 'controlState',
          width: 140,
          customRender: function(text, row, index) {
            const controlState = row.event.controlState;
            let v = controlState;
            if (!v) {
              v = '待处理';
            }
            return <div class='h-48'>{v}</div>;
          }
        }
      ]
    };
  },
  computed: {
    ...mapState('fraMonitoring', [
      'ftmAirlineList',
      'ftmFleetList',
      'depListFilter',
      'arrListFilter',
      'ftmAirplaneListFilter',
      'ftmFleetListFilter'
    ]),
    ...mapState('setting', ['pageMinHeight']),
    ...mapGetters('setting', ['sideMenuWidth']),
    ...mapState('eventMonitoring', [
      'paginationOptions',
      'eventList',
      'eventListLoading',
      'processingExportExcelLoading'
    ]),
    otherItemF: {
      get() {
        return !!this.search.otherItem;
      },
      set(v) {
        this.search.otherItem = +v;
      }
    }
  },
  beforeDestroy(){
    this.$bus.$off('exec_update',this.eventUpdate)
  },
  mounted() {
    this.$bus.$on('exec_update',this.eventUpdate)
    this.checkedFilter = JSON.parse(localStorage.getItem('emSF') ?? JSON.stringify([...this.checkedFilter]));

    if (this.$route.query?.tailnumber) {
      this.$set(this.search, 'tailnumber', [this.$route.query.tailnumber]);
    }
    // if (this.$route.query?.oi) {
    //   this.$set(this.search, 'otherItem', +this.$route.query?.oi);
    // }

    if (this.$route.query?.code) {
      this.msgCode = decodeURIComponent(this.$route.query.code);
      // this.$set(this.search, 'code', [this.$route.query.tailnumber]);
    }

    this.changeTable({ current: 1 });

    this.timedRefresh();

    this.getControlState();
  },
  beforeDestroy() {
    clearTimeout(this.refresh);
  },
  methods: {
    getControlState() {
      getControlState().then((res) => {
        if (!res) {
          return false;
        }
        if (res.code === 200) {
          const data = res.data;
          const reslist = [];
          for (var map of data) {
            const resmap = {};
            resmap.key = map.statuName;
            resmap.value = map.statusCode;
            reslist.push(resmap);
          }
          this.selectOptionS = reslist;
        }
      });
    },
    ...mapMutations('eventMonitoring', [
      'setState'
    ]),
    ...mapMutations('fraMonitoring', {
      'setFMState': 'setState'
    }),
    ...mapActions('fraMonitoring', [
      'getFtmFleetFilter',
      'getFtmAirportListFilter',
      'getFtmAirplaneListFilter'
    ]),
    ...mapActions('eventMonitoring', [
      'getEventList',
      'processingExportExcel'
    ]),
    // 筛选弹框
    handleClickChange(visible) {
      if (visible) {
        this.checkedFilterTmp = [...this.checkedFilter];
      }
      this.checkedFilterShow = visible;
    },

    // 保存选择的筛选条件
    filterChangeSave() {
      this.checkedFilterShow = false;
      this.checkedFilter = [...this.checkedFilterTmp];
      localStorage.setItem('emSF', JSON.stringify([...this.checkedFilter]));
      this.$store.dispatch('setting/setPageHeight');
      this.setPageHHandeler();
    },
    resetSearchHandler() {
      this.search = {
        otherItem: 0
      };
      if (this.$route.query?.tailnumber) {
        this.$set(this.search, 'tailnumber', [this.$route.query.tailnumber]);
      }
      // if (this.$route.query?.oi) {
      //   this.$set(this.search, 'otherItem', +this.$route.query?.oi);
      // }
      this.msgName = '';
      this.msgCode = '';

      if (this.$route.query?.code) {
        this.msgCode = decodeURIComponent(this.$route.query.code);
      // this.$set(this.search, 'code', [this.$route.query.tailnumber]);
      }
      this.changeTable({ current: 1 });
    },
    exportHandler() {
      var obj = {
        ids: this.allCheck ? [] : this.selectedRowIds
      };
      const ext = {
        description: this.msgName || undefined
      };
      var temp = { ...ext, ...this.search, noLoading: true }
      var params = Object.assign(obj, temp)
      this.processingExportExcel(params).then(res => {
        const FileName = decodeURI(
          res.headers['content-disposition'].split(';')[1].split('=')[1]
        );
        const type = decodeURI(
          res.headers['content-type']
        );
        downloadUrl(res.data, FileName, type);
      });
    },

    onChangeRow(selectedRowKeys, selectedAll) {
      if (this.eventList.length === selectedRowKeys.length) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
      const ids = selectedAll.flatMap(item => item.event.id);
      this.selectedRowIds = ids;
      this.selectedRowKeys = selectedRowKeys;
    },
    // 点击行
    customRow(record, index) {
      return {
        on: {
          click: (event, e) => {
            this.setState({ key: 'dataType', payload: 1 });
            this.clickRowHandler(record, index);
          }
        }
      };
    },

    clickRowHandler(record, index) {
      this.setFMState({ key: 'activeIndex', payload: [index] });
      this.setFMState({ key: 'eventDetailsVisible', payload: true });
      const currentRow = { ...record, ...record.event ?? {}};
      localStorage.setItem('eRow', JSON.stringify(currentRow));
    },
    repHandler(e, record, flag) {
      e.stopPropagation();
      const currentRow = {
        ...record,
        ...record.event ?? {},
        id: record.legId || record.id || record.event.legId || record.event.id
      };
      localStorage.setItem('row', JSON.stringify(currentRow));
      this.setFMState({ key: flag, payload: true });
    },
    changeAirline() {
      const params = {
        airline: this.search.airline || undefined,
        fleet: this.search.fleet || undefined
      };
      this.getFtmFleetFilter(params);
      // this.getFtmAirportListFilter(params);
      // 机号
      this.getFtmAirplaneListFilter(params);
    },

    changeFleet(v) {
      const params = {
        airline: this.search.airline || undefined,
        fleet: this.search.fleet || undefined
      };
      // this.getFtmFleetFilter({ airline: v[0] });
      // this.getFtmAirportListFilter({ airline: v[0] });
      // 机号
      this.getFtmAirplaneListFilter(params);
    },
    // 固定刷新
    eventUpdate(){
        const ext = {
          description: this.msgName || undefined
        };

        ext['code'] = this.msgCode;
        this.getData({ ...ext, ...this.search, noLoading: true });
    },
    // 定时60s刷新
    timedRefresh() {
      clearTimeout(this.refresh);
      this.refresh = setTimeout(() => {
        const ext = {
          description: this.msgName || undefined
        };

        ext['code'] = this.msgCode;
        this.getData({ ...ext, ...this.search, noLoading: true });
        this.timedRefresh();
      }, 60000);
    },
    changeTable({ current, pageSize = 50 }) {
      if (pageSize !== this.paginationOptions.pageSize) {
        current = 1;
      }

      this.setState({ key: 'paginationOptions', payload: { ...this.paginationOptions, pageNum: current, pageSize }});
      const ext = {
        description: this.msgName || undefined
      };

      if (this.search?.eventType === 'MMSG' || this.search?.eventType?.includes('MMSG')) {
        const mmsgType = this.search.mmsgType ?? 0;
        this.$set(this.search, 'mmsgType', mmsgType);
      }

      ext['code'] = this.msgCode;
      this.timedRefresh();
      this.getData({ ...ext, ...this.search });
      this.setPageHHandeler();
    },

    setPageHHandeler() {
      this.$nextTick(() => {
        setTimeout(() => {
          const och = document.querySelector('.em-monitoring')?.clientHeight ?? 600;
          this.sliderHeight = `${och - 120}px`;
        }, 0);
      });
    },
    async getData(p) {
      const params = {
        ...p
      };

      await this.getEventList(params);
      if (this.$route.query?.code) {
        if (this.eventList[0]) {
          this.clickRowHandler(this.eventList[0], 0);
        }

        // this.$set(this.search, 'code', [this.$route.query.tailnumber]);
      }
    }

  }
};
</script>

<style lang="less">
@import "index";
</style>

